<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="index-content">
        <header class="index-header white">
            <div class="flex ai-center">
                <h5 class="f-40">XX的家</h5>
                <img class="down-icon ml-12" src="./images/down_2_icon.png" alt="">
            </div>
            <p class="f-26 show-btn mt-12">12台设备</p>
            <button class="add-btn">
                <img src="./images/add_icon.png" alt="">
            </button>
        </header>

        <nav class="index-nav f-28 c-gray f-weight">
            <p class="nav-active">全部</p>
            <p>卧室</p>
            <p>2号卧室</p>
            <p>厨房</p>
            <p>客厅</p>
            <p>卫生间</p>
            <img src="./images/down_1_icon.png" alt="">
        </nav>

        <div class="flex fl-wrap block-list">
          
        </div>
    </div>

    <!-- 底部tab -->
    <div class="footer fl-ar bg-black">
        <a href="#">
            <img src="./images/home-a.png" alt="">
            <p class="blue-1">首页</p>
        </a>
        <a href="./device.html">
            <img src="./images/shebei-n.png" alt="">
            <p>设备</p>
        </a>
        <a href="./mine.html">
            <img src="./images/wode-n.png" alt="">
            <p>我的</p>
        </a>
    </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="./js/template-web.js"></script>
<script type="text/html" id="tpl">
   
    {{each data}}
    <div class="block-icon">
        <div class="flex f-weight j-s-b">
            <p class="f-28 black-1">{{$value.title}}</p>
            <p class="f-24 gray-90">{{$value.pos}}</p>
        </div>
        <div class="flex j-s-b al-center mt-40">
            <img class="source" src="{{$value.source}}" alt="">
            
            {{if $value.info}}
            <div class="f-weight">
                <p class="f-50">{{$value.info.PM2dot5}} <span class="blue-1 f-26">{{$value.info.level}}</span></p>
                <p class="f-24 gray-90">PM2.5/1h</p>
            </div>
            {{else}}
            <div class="close-btn {{$value.status ? 'is-open' : ''}}">
                <img src="./images/close_2_icon.png" alt="">
            </div>
            {{/if}}
        </div>
    </div>
    {{/each}}

</script>
<script>
    $.ajax({
        url: "./data/data.json",
        method: "GET",
        success: function (res) {
            render(res)
        }
    })

    function render(res){
        var html = template('tpl', res)
        $('.block-list').html(html)
    }
</script>

</html>